{% if user.is_authenticated %}
	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <link rel="icon" href="/static/favicon.ico">
	    <meta name="description" content="">
	    <meta name="keyword" content="">
	    <meta name="author" content="root" >
	    <title>C段扫描</title>
	    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
	    <link rel="stylesheet" type="text/css" href="/static/style.css">
	</head>
	<body>
	{% include 'header.html'%}

	<div class="container text-center banner">

	    <!-- 扫描面板-->
	    <div class="panel panel-primary">
	          <div class="panel-heading">
	            <h3 class="panel-title">C段扫描</h3>
	          </div>
	          <div class="panel-body">
	                <!-- 扫描字段 -->
	                <form class="form-inline" role="form" method="GET" action="lan_scan/" id="lan">
	                  <div class="form-group">
	                    <label >Domain:</label> &nbsp;&nbsp;
	                    <input type="text" class="form-control" name="url" id="url" value="127.0.0.1" placeholder="192.168.1.1">
	                  </div>
					  <!--
	                  <div class="form-group">
	                    <label >选择分类:</label> &nbsp;&nbsp;
	                    <select class="form-control">
	                      <option value=0>HOST主机协议类</option>
	                      <option value=1>HTTP WEB网站类</option>
	                    </select>&nbsp;&nbsp;
	                  </div>
					  -->
					  &nbsp;&nbsp;&nbsp;&nbsp;
	                  <div class="form-group">
	                    <label title="当下拉列表漏洞较多的时候，可以点击然后输入首选字母检索poc">选择漏洞:</label> &nbsp;&nbsp;
	                    <select class="form-control" name="vulid" id="vulid">
							{% for v in data %}
							<option value={{ v.vulID}}>{{ v.name | slice:"45" }}</option>
							{% endfor %} 
	                    </select>
	                  </div>
					  &nbsp;&nbsp;&nbsp;&nbsp;
	                  <!--
					  <button type="submit" class="btn btn-default" onclick="submit_scan()">Start</button>
					  -->
					  <button type="button" class="btn btn-default" onclick="submit_scan()">Start</button> &nbsp;&nbsp;&nbsp;&nbsp;
					  <a class="btn btn-default" id="report" target="_blank" href="{% url 'scan_report' %}">Report</a><!-- onclick="javascript:alert('report.html')" -->
	                </form>
	          </div>
	    </div>
	    <!-- 扫描面板结束 -->

	<!--
	<label >当下拉列表漏洞较多的时候，可以点击然后输入首选字母检索poc</label>
	-->

	<!-- 进度条-->
	<div class="progress" id="scan_jindu">
	  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%" id="progress"> 0% 完成
	  </div>
	</div>

	<!-- 实时添加数据 -->
	<table class="table table-hover" id="info">
	</table>

	</div>


	{% include 'footer.html' %}
	<!-- js引用-->
	<script src="/static/js/jquery.min.js"></script>
	<script src="/static/js/bootstrap.min.js"></script>

	<script type="text/javascript">
	//装入页面
	$(window).load(function() {
		//判断是否有结果
		start();
	}); 

	function start(){
		$.ajax({
			url:window.location.protocol + "//" + window.location.host + "{% url 'scan_jindu' %}",
			type:"GET",
			dataType:'json',
			success:function(data){//ajax返回的数据
				//如果为 0 则没有结果
				if (data*1 == 0){
					//没有开始,默认隐藏进度条
					$("#scan_jindu").hide();
				}else if(data == 100){
					//刷新扫描结果
					ajax_result();
					//刷新进度条
					scan_jindu();			
				}
				else{
					//实时获取数据
					ajax_resule = self.setInterval("ajax_result()",1000);
					$("#scan_jindu").show();//显示进度条
					ajax_jindu = self.setInterval("scan_jindu()",1000);
				}		
			},	
		});
	  
	}
	//进度条
	function scan_jindu(){
	  $.ajax({
	       url:window.location.protocol + '//' + window.location.host + "{% url 'scan_jindu' %}",
	       type:"GET",
	       success:function(data){//ajax返回的数据
	        var result = data;
	        //alert("width: "+result+"%");
	        //添加进度条
	        $("#progress").attr("style","width: "+result+"%");
	        //添加进度条 百分比 显示
	        $("#progress").html(function(){
	          if (result<100){
	            return result + "% 完成";
	          }
	          else {//完成后 清空 ajax刷新计划
	            if (result == 100){
	              self.clearInterval(scan_jindu);
				  self.clearInterval(ajax_result);
	              $("#submit").removeClass('disabled'); 
	              return result + "% 完成";}
	            else{
	                self.clearInterval(scan_jindu);
					self.clearInterval(ajax_result);
	                $("#submit").removeClass('disabled');
	                return result + "网络异常 %"; }

	          }
	          });
	        },

	      });
	}
	//异步刷新
	function submit_scan(){
		//获取表单值
		var url = $("#url").val();
		var vulid = $("#vulid").val();
		//var token = $(".csrfmiddlewaretoken :hidden").val();
		//alert(token);
		//alert( url + vulid );
		ajax_url = window.location.protocol + "//" + window.location.host + "{% url 'lan_scan' %}";
		//alert("{% url 'lan_scan' %}"+"?url="+url+"&vulid="+vulid );
		//alert(ajax_url+"?url="+url+"&vulid="+vulid);
		
		//发起扫描请求
		$.get(ajax_url+"?url="+url+"&vulid="+vulid);
		//实时获取数据
		ajax_resule = self.setInterval("ajax_result()",1000);
		
		$("#scan_jindu").show();//显示进度条
		ajax_jindu = self.setInterval("scan_jindu()",1000);
		
		
	}
	// ajax 获取结果
	function ajax_result(){
		//alert("耐心等待一会,解决完bug改为实时刷新结果！\n 扫描完毕后会自动显示结果!暂未保存结果 \n 增加多线程 + 进度条！");
		//定时获取数据
		//alert(window.location.protocol + "//" + window.location.host + "{% url 'lan_json' %}");
		$.ajax({
			url:window.location.protocol + "//" + window.location.host + "{% url 'lan_json' %}",
			type:"GET",
			dataType:'json',
			success:function(data){//ajax返回的数据
				//alert(data);
				$("#info").html("<tr><th>POC文件</th><th>检测URL</th><th>Payload</th></tr>");//设置表哥头内容
				$.each(data,function(index,content){
					//alert(content.url);
					//判断结束了停止刷新
					if (content.vul*1 == 0){
					//alert(0);
					self.clearInterval(ajax_resule);
					self.clearInterval(ajax_jindu);
					//显示导出报告按钮
					$("#report").show();
					}else{
					//alert(1);
					//会重复添加,实时刷新此处要判断td1 and td2是否重复
					$("#info").append(
						"<tr><td>" + content.vul + "</td>" + 
						"<td>" + content.url + "</td>" +
						"<td>" + content.report + "</tr>");
						
					}
				});
				
			},	
		});
		
	/**
	  $.getJSON(ajax_url+"?url="+url+"&vulid="+vulid, function(data) {
	  $("#info").html("");//清空info内容
	  $.each(data.comments, function(i, item) {
	   $("#info").append(
	     "<div>" + item.vul + "</div>" + 
	     "<div>" + item.url + "</div>" +
	     "<div>" + item.report + "</div><hr/>");
	  });
	  });
	**/
	}

	</script>

	</body>
	</html>
{% else %}
<script>window.location.href="{% url 'login' %}";</script> 
{% endif %}